<template>
  <div class="detail_container">
    <navbar></navbar>
      <van-tabs swipe-threshold="5" v-model:active="active" title-active-color="rgba(238, 140, 144)"
        color="rgba(238, 140, 144)" @click-tab="changeHandler" :sticky="true" offset-top="44">
        <van-tab
          :title-style="{ borderTop: '1px solid rgba(224, 220, 221)', borderBottom: '1px solid rgba(224, 220, 221)' }"
          v-for="item in categoryL2List" :title="item.name">
           <sortDetail :item="item" :categoryItems="categoryItems"></sortDetail>
          <div class="more">更多内容,敬请期待</div>
        </van-tab>
      </van-tabs>
      <van-back-top right="10px" bottom="80px" />
  </div>
</template>

<script setup lang="ts">
import { categorydetail, type ContainIdObject, type AnyObject } from '@/api/sort';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router'
import sortDetail from '../../../../components/sortdetrail/index.vue' 
const Route = useRoute()
const active = ref(0)
const categoryL2List = ref<ContainIdObject[]>([])
const categoryItems = ref<AnyObject>({})
onMounted(() => {
  categorydetailHandler(Route.query.categoryType as string, Route.query.subCategoryId as string, Route.query.categoryId as string)
})
async function categorydetailHandler(categoryType: string, subCategoryId: string, categoryId: string) {
  try {
    let res = await categorydetail(categoryType, subCategoryId, categoryId)
    categoryL2List.value = res.data.categoryL2List
    categoryItems.value = res.data.categoryItems!
  } catch (error) {
    console.error(error)
  }
}
function changeHandler(e: any) {
  categoryL2List.value.forEach(item => {
    if (item.name == e.title) {
      console.log(item.categoryType, item.id, item.superCategoryId)
      categorydetailHandler(item.categoryType, item.id, item.superCategoryId)
    }
  })
}
</script>

<style lang="less" scoped>
.detail_container {
  width: 100%;
  height: 100%;
  background: rgba(226, 226, 226);



  .more {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    color: rgba(153, 153, 153);
  }

}</style>
